<template>
  <el-tree
    class="bookmarks-tree"
    ref="bookmarkRef"
    accordion
    :data="TreeItems"
    :show-checkbox="false"
    :props="defaultProps"
    node-key="id"
    :expand-on-click-node="true"
    :render-content="renderContent"
    @node-expand="treeNodeExpandHandle"
    @node-collapse="treeNodeCollapseHandle"
    @node-click="treeNodeClikHandle">
  </el-tree>
</template>
<script>
export default {
  name: 'LSBookmarksTree',
  props: {
    TreeItems: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      treeDataItems: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  mounted() {
    this.$emit('selectBookmark', this.treeDataItems);
  },
  updated() {
    this.treeDataItems = JSON.parse(JSON.stringify(this.TreeItems)),
    this.$emit('selectBookmark', this.treeDataItems);
  },
  methods: {
    statisNavRouter(itemNode) {
      const navRouters = [];
      while(itemNode.parent) {
        if (!itemNode.parent) {
          break;
        }
        let {title, id} = itemNode.data;
        navRouters.unshift({title, id});
        itemNode = itemNode.parent
      }
      return navRouters;
    },
    treeNodeClikHandle(data, node, nodeComp) {
      // console.log('************* treeNodeClikHandle ', data, node, nodeComp);
      if (node.isLeaf) {
        this.$emit('openPage', data);
      }
    },
    treeNodeExpandHandle(data, node, nodeComp) {
      // console.log('************* treeNodeExpandHandle ', data, node, )
      this.$emit('selectBookmark', data.children || [], this.statisNavRouter(node));
    },
    treeNodeCollapseHandle(data, node, nodeComp) {
      // console.log('************* treeNodeCollapseHandle ', data, node, nodeComp)
      // 折叠收藏文件夹时，导航信息需展示到上一层
      let navRouter = this.statisNavRouter(node);
      navRouter.splice(-1, 1);
      this.$emit('selectBookmark', node.parent.data.children || node.parent.data || [], navRouter);
    },
    append(data) {
      // const newChild = { id: id++, label: 'testtest', children: [] };
      // if (!data.children) {
      //   this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
    },
    remove(node, data) {
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      // children.splice(index, 1);
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <i class={['el-icon-collection-tag', 'tree-node-icon']}></i>
          <span class="tree-node-content">{data.title}</span>
          <span class={['tree-node-operate', 'tree-node-operate__show']}>
            <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" on-click={ () => this.append(data) }></el-button>
            <el-button size="mini" type="text" icon="el-icon-remove-outline" on-click={ () => this.remove(node, data) }></el-button>
          </span>
        </span>);
    }
  }
}
</script>
<style scoped>
.el-tree{

  height: 100%;
}

.bookmarks-tree /deep/ .custom-tree-node{
  font-size: 15px;
}

.bookmarks-tree /deep/ .tree-node-icon{
  color: #52baea;
}

.bookmarks-tree /deep/ .tree-node-content{
  padding: 0px 5px;
}

.bookmarks-tree /deep/ .tree-node-operate__show{
  display: none;
}

.bookmarks-tree /deep/ .tree-node-operate__show .el-button{
  font-size: 16px;
}
</style>